<template>
	<div class="demo">
		<div class="topBackImg">
			<!-- 图标 -->
			<div class="topIcon">
				<van-icon name="setting-o" color="#fff" size="30px" />
			</div>
			<!-- 用户头像 -->
			<div class="user-avatar">
				<div class="head-portrait">V</div>
				<div class="compellation">{{ UserRoot }}</div>
			</div>
			<!-- 余额和优惠券和购买数和积分 -->
			<div class="Balance-and-coupons-and-purchase-number-and-points">
				<div class="command">
					<div class="Balance">
						<div class="item1">{{ usertatol || 0 }}</div>
						<div class="item2">余额</div>
					</div>

					<div class="Balance">
						<div class="item1">0</div>
						<div class="item2">优惠券</div>
					</div>

					<div class="Balance">
						<div class="item1">0</div>
						<div class="item2">购买数</div>
					</div>

					<div class="Balance">
						<div class="item1">0</div>
						<div class="item2">积分</div>
					</div>
				</div>
			</div>

			<!-- 未支付 -->

			<div class="Unpaid-to-be-shipped-to-be-received-to-be-evaluated-Completed">
				<div class="Merchandise-details-out-of-town">
					<div
						class="item"
						v-for="(item, index) in commodityDetails"
						:key="index"
						@click="toOrder(item)"
					>
						<div class="icon">
							<van-icon :name="item.icon" size="30px" />
						</div>
						<div class="title">{{ item.status }}</div>
					</div>
				</div>
			</div>
			<!-- <van-icon name="setting" />
                地址管理和我的钱包和我的收藏和我的足迹和修改密码
             -->
			<div
				class="Address-management-and-my-wallet-and-my-favorites-and-my-footprints-and-change-passwords"
			>
				<div class="control-hierarchy">
					<div
						class="item"
						v-for="(item, index) in CustomerDetails"
						:key="index"
						@click="redirect(item.to)"
					>
						<div class="item1">
							<van-icon :name="item.smallIcon" :color="item.color" size="15px" />
							<div class="title">{{ item.title }}</div>
						</div>
						<div class="boult">{{ item.boult }}</div>
					</div>
				</div>
			</div>

			<div class="Log-in-outer-urban">
				<div class="submit" :class="[LogInNo ? bacRed : backGreen]" @click="toLogin()">
					{{ LogInNo ? "退出" : "登录" }}
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
	name: "PersonNal",
	components: {},
	data() {
		return {
			LogInNo: false,
			bacRed: "bacRed",
			backGreen: "backGreen",
			datas: [
				{
					price: 0,
					name: "余额"
				},
				{
					price: 59101.1,
					name: "优惠券"
				},
				{
					price: 59101.1,
					name: "购买数"
				},
				{
					price: 59101.1,
					name: "积分"
				}
			],
			commodityDetails: [
				{
					icon: "shop-o",
					status: "未支付",
					to: "OrderForm",
					index: 0
				},
				{
					icon: "logistics",
					status: "待发货",
					to: "OrderForm",
					index: 1
				},
				{
					icon: "goods-collect-o",
					status: "待发货",
					to: "OrderForm",
					index: 2
				},
				{
					icon: "cart-o",
					status: "待评价",
					to: "OrderForm",
					index: 3
				},
				{
					icon: "cart-circle-o",
					status: "已完成",
					to: "OrderForm",
					index: 4
				}
			],
			CustomerDetails: [
				{
					smallIcon: "location",
					title: "地址管理",
					boult: ">",
					color: "#2ecc71"
				},
				{
					smallIcon: "paid",
					title: "我的钱包",
					boult: ">",
					color: "rgb(228, 27, 104)",
					to: "Burse"
				},
				{
					smallIcon: "goods-collect",
					title: "我的收藏",
					boult: ">",
					color: "#3498db",
					to: "Collect"
				},
				{
					smallIcon: "underway",
					title: "我的足迹",
					boult: ">",
					color: "#ff6b81",
					to: "Footprint"
				},
				{
					smallIcon: "setting",
					title: "修改密码",
					boult: ">",
					color: "#ff6348"
				}
			]
		};
	},
	mounted() {
		// 登录后改变登录框
		(this.UserId && (this.LogInNo = true)) || (this.LogInNo = false);
		console.log("挂载");
	},
	destroyed() {
		console.log("销毁");
	},
	methods: {
		toLogin() {
			this.$router.push({
				name: "Login"
			});
		},
		// 查看商品状态
		redirect(name = "", information) {
			name !== "" &&
				this.$router.push({
					name,
					params: {
						activeName: information
					}
				});
		},

		toOrder(item) {
			item instanceof Object &&
				this.$router.push({
					name: "OrderForm",
					params: {
						nums: item.index
					}
				});
		}
	},
	computed: {
		// 登录列表
		...mapState("MobilePhone", ["UserId", "UserRoot", "usertatol"])
	}
};
</script>
<style lang="less" scoped>
.demo {
	.topBackImg {
		width: 100%;
		height: 200px;
		background-image: url(../assets/image/3.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
		.topIcon {
			padding-top: 15px;
			padding-right: 20px;
			text-align: right;
			//   border: @bor;
		}
		.user-avatar {
			display: flex;
			height: 100px;

			align-items: center;
			overflow: hidden;
			.head-portrait {
				margin-left: 20px;
				width: 70px;
				height: 70px;
				// height: 100%;
				background-color: rgb(86, 180, 117);
				text-align: center;
				line-height: 70px;
				font-weight: bold;
				font-size: 40px;
				border-radius: 50%;
				margin-right: 20px;
			}
			.compellation {
				color: white;
				font-size: 15px;
			}
		}

		.Balance-and-coupons-and-purchase-number-and-points {
			margin-top: 10px;
			width: 100%;
			height: 60px;
			.command {
				background-color: rgba(0, 0, 0, 0.747);
				border-radius: 10px;
				margin: auto;
				width: 85%;
				height: 100%;
				// border: @bor;
				display: flex;
				font-size: 11px;
				justify-content: space-around;
				align-items: center;
				.Balance {
					// border: @bor;
					height: 50%;
					display: flex;
					flex-wrap: wrap;
					align-content: space-around;
					line-height: 20px;

					.item1 {
						color: rgb(228, 27, 104);
						text-align: center;
						font-size: 15px;

						width: 100%;
					}
					.item2 {
						color: rgb(243, 243, 243);
						text-align: center;
						width: 100%;
					}
				}
			}
		}
		.Unpaid-to-be-shipped-to-be-received-to-be-evaluated-Completed {
			height: 72.05px;
			margin-top: 10px;
			.Merchandise-details-out-of-town {
				background-color: white;
				height: 100%;
				width: 85%;
				margin: auto;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-radius: 10px;
			}
			.item {
				text-align: center;
			}
			.icon {
			}
			.title {
			}
		}
		.Address-management-and-my-wallet-and-my-favorites-and-my-footprints-and-change-passwords {
			width: 100%;
			margin-top: 10px;
			.control-hierarchy {
				background: white;
				margin: auto;
				width: 85%;
				height: 226.15px;
				padding: 0 13px 0;
				box-sizing: border-box;
				border-radius: 10px;
				.item:not(:last-of-type) {
					border-bottom: 1px solid #57606f11;
				}
				.item {
					height: 44.2px;

					display: flex;
					justify-content: space-between;
					align-items: center;
					.item1 {
						width: 26%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						// border: @bor;
						font-size: 14px;
						/deep/ .van-icon {
							// border: @bor;
							align-self: flex-end;
						}
						.title {
							// border: @bor;
							// align-self: flex-end;
						}
					}
					.boult {
						font-size: 20px;
						color: #a4b0be;
					}
				}
			}
		}
		.Log-in-outer-urban {
			width: 100%;
			margin-top: 10px;
			.submit {
				border-radius: 10px;
				margin: auto;
				width: 85%;
				height: 50px;
				color: white;
				text-align: center;
				line-height: 50px;
				font-size: 14px;
			}
			.bacRed {
				background: orangered;
			}
			.backGreen {
				background: rgb(78, 202, 48);
			}
		}
	}
}
</style>
